<!DOCTYPE html>
<html>
<head>
	<title>后台管理-用户</title>
	<link href="/libs/css/bootstrap.min.css" rel="stylesheet">
	<link href="/libs/css/sweetalert.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./css/public.css">
	<script src="/libs/js/jquery.min.js"></script>
	<script src="/libs/js/bootstrap.min.js"></script>
	<script src="/libs/js/vue.min.js"></script>
	<script src="/libs/js/sweetalert.min.js"></script>
	<style type="text/css">
		[v-cloak] {
		display: none;
		} 
	</style>
</head>
<body>
<div id="app" v-cloak>

	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="">后台管理</a>
		</div>
		<div>
			<ul class="nav navbar-nav" style="float:right;">
				<li><a href="/admin/create.html">发布新闻</a></li>
				<li><a href="/admin/news.html">新闻管理</a></li>
				<li><a href="/admin/module.html">模块管理</a></li>
				<li class="active"><a>用户管理</a></li>
				<li><a href="/admin/comment.html">评论管理</a></li>
				<li class="dropdown" style="width: 100px;text-align: right;">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						{{adminMsg.name||adminMsg.account}}
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" style="left:auto;right:0;min-width:100px">
						<li v-on:click="$('#passwordModal').modal('show')" style="height:40px;"><a href="#" style="line-height: 40px">修改密码</a></li>
						<li v-on:click="$('#nameModal').modal('show')"  style="height:40px;"><a href="#" style="line-height: 40px">修改名字</a></li>
						<li v-on:click="logout" style="height:40px;"><a href="#" style="line-height: 40px">退出登录</a></li>
					</ul>
				</li>
			</ul>
		</div>
		</div>
	</nav>

	<h1 style="display: block;width: 1000px;margin: 0 auto;border-bottom: 1px solid rgb(102,102,102);padding-bottom: 10px;margin-bottom: 20px;">用户管理</h1>

	<div class="user-container">
		<ul class="nav nav-tabs">
			<li v-bind:class="{ active: menu=='all' }"><a v-on:click="changeMenu('all')" style="cursor: pointer">在用用户</a></li>
			<li v-bind:class="{ active: menu=='delete' }"><a v-on:click="changeMenu('delete')" style="cursor: pointer">禁用用户</a></li>
		</ul>
		<div class="user-content">
			<div class="item" v-for="(item, key) in showUserList">
				<div class="item-img">
					<img class="img-responsive" :src="item.headimg?item.headimg:'/assets/head.jpg'">
				</div>
				<div class="item-msg">
					<p>{{item.name||item.account}}</p>
					<div>
						<button v-on:click="showUserMsg(key)" type="button" class="btn btn-info btn-xs">查看</button>
						<button v-if="item.able == 1" v-on:click="deleteUser(item.id)" type="button" class="btn btn-danger btn-xs">禁用</button>
						<button v-else v-on:click="recoverUser(item.id)" type="button" class="btn btn-success btn-xs">恢复</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="userMsgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 350px;margin-top:150px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						{{showUser.name || showUser.account}}的信息
					</h4>
				</div>
				<div class="modal-body">
					<p>用户头像：<img style="width: 50px;height: 50px"  :src="showUser.headimg?showUser.headimg:'/assets/head.jpg'">	</p>
					<p>用户账号：{{showUser.account}}</p>
					<p>用户昵称：{{showUser.name || '未设置'}}</p>
					<p>创建时间：{{showUser.createtime}}</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>


	<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 350px;margin-top: 150px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						修改密码
					</h4>
				</div>
				<div class="modal-body">
					<input class="form-control change-password" v-model="oldpassword" type="password" placeholder="输入旧密码" style="margin-bottom: 10px;" maxlength="16">
					<input class="form-control change-password" v-model="newpassword" type="password" placeholder="输入新密码" maxlength="16">
				</div>
				<div class="modal-footer">
					<button v-on:click="changePassword" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="nameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 350px;margin-top: 150px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						修改密码
					</h4>
				</div>
				<div class="modal-body">
					<input class="form-control change-password" v-model="newname" type="text" placeholder="输入修改名字" maxlength="5">
				</div>
				<div class="modal-footer">
					<button v-on:click="changeName" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>


</div>



<script type="text/javascript" src="./js/user.js"></script>
</body>
</html>